<template>
  <div class="max-w-3xl mx-auto bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">柏拉图-比重转换器</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500">
        <p>在柏拉图度(°P)和比重(SG)之间进行转换。柏拉图度表示溶液中可发酵糖的百分比重量。</p>
      </div>
      
      <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
        <!-- 柏拉图到比重 -->
        <div class="space-y-4">
          <div>
            <label for="plato" class="block text-sm font-medium text-gray-700">柏拉图度 (°P)</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <input
                type="number"
                name="plato"
                id="plato"
                v-model="plato"
                step="0.1"
                class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
                placeholder="0.0"
                @input="platoToSG"
              >
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">°P</span>
              </div>
            </div>
          </div>
          
          <div>
            <label for="sg-from-plato" class="block text-sm font-medium text-gray-700">比重 (SG)</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <input
                type="number"
                name="sg-from-plato"
                id="sg-from-plato"
                v-model="sgFromPlato"
                disabled
                class="bg-gray-50 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
                placeholder="1.000"
              >
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">SG</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 比重到柏拉图 -->
        <div class="space-y-4">
          <div>
            <label for="sg" class="block text-sm font-medium text-gray-700">比重 (SG)</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <input
                type="number"
                name="sg"
                id="sg"
                v-model="sg"
                step="0.001"
                class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
                placeholder="1.000"
                @input="sgToPlato"
              >
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">SG</span>
              </div>
            </div>
          </div>
          
          <div>
            <label for="plato-from-sg" class="block text-sm font-medium text-gray-700">柏拉图度 (°P)</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <input
                type="number"
                name="plato-from-sg"
                id="plato-from-sg"
                v-model="platoFromSG"
                disabled
                class="bg-gray-50 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
                placeholder="0.0"
              >
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">°P</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 转换公式说明 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">转换公式</h4>
        <div class="mt-2 text-sm text-gray-500 space-y-1">
          <p>°P 到 SG: SG = (°P / (258.6 - (°P / 258.2 * 227.1))) + 1</p>
          <p>SG 到 °P: °P = (-1 * 616.868) + (1111.14 * SG) - (630.272 * SG²) + (135.997 * SG³)</p>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">使用说明</h3>
            <div class="mt-2 text-sm text-yellow-700">
              <ul class="list-disc pl-5 space-y-1">
                <li>柏拉图度常用范围：0-30°P</li>
                <li>比重常用范围：1.000-1.130 SG</li>
                <li>精确到小数点后3位</li>
                <li>温度基准：20°C/68°F</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const plato = ref('')
const sg = ref('')
const sgFromPlato = ref('')
const platoFromSG = ref('')

// 柏拉图度转比重
function platoToSG() {
  if (plato.value === '' || isNaN(plato.value)) {
    sgFromPlato.value = ''
    return
  }
  
  const p = parseFloat(plato.value)
  // 使用更精确的转换公式
  const sg = (p / (258.6 - ((p / 258.2) * 227.1))) + 1
  sgFromPlato.value = sg.toFixed(3)
}

// 比重转柏拉图度
function sgToPlato() {
  if (sg.value === '' || isNaN(sg.value)) {
    platoFromSG.value = ''
    return
  }
  
  const specificGravity = parseFloat(sg.value)
  // 使用更精确的转换公式
  const p = (-1 * 616.868) + (1111.14 * specificGravity) - (630.272 * Math.pow(specificGravity, 2)) + (135.997 * Math.pow(specificGravity, 3))
  platoFromSG.value = p.toFixed(1)
}

// 监听输入变化
watch(plato, platoToSG)
watch(sg, sgToPlato)
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style> 